<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="mt-dialog"
    width="90%"
    @close="close"
  >
    <div class="top">
      <el-input
        v-model="kwInput"
        style="float: right"
        placeholder="输入 任意字符 进行筛选"
        class="input-with-select"
        clearable
        @keyup.native.enter="handleGetReportData"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleGetReportData">搜索</el-button>
      </el-input>
      <el-select
        v-model="filter_type"
        style="float: right; width: 200px"
        placeholder="选择默认排序"
        @change="handleSetFilter"
      >
        <el-option label="不过滤" value="normal" />
        <el-option label="亏损" value="loss" />
        <el-option label="高展示,不赚钱" value="highimpr" />
        <el-option label="高点击,不赚钱" value="highclick" />
        <el-option label="需要优化" value="optimize" />
        <el-option label="赚钱" value="profitable" />
        <el-option label="建议删除" value="suggest_delete" />
        <el-option label="自定义" value="custome" />
      </el-select>
      <el-tooltip
        style="float: right;margin-top: 5px;margin-left: 10px;"
        class="item"
        effect="dark"
        content="包含删除"
        placement="bottom-start"
      >
        <el-switch v-model="showdelete" @change="handleGetReportData" />
      </el-tooltip>
      <el-tooltip
        style="float: right;margin-top: 5px;"
        class="item"
        effect="dark"
        content="需要操作"
        placement="bottom-start"
      >
        <el-switch v-model="suggestion_operation" @change="handleGetReportData" />
      </el-tooltip>
      <el-tooltip
        style="float: right;margin-top: 5px;"
        class="item"
        effect="dark"
        content="查看所有网站"
        placement="bottom-start"
      >
        <el-switch v-model="showall" @change="handleGetReportData" />
      </el-tooltip>

    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      border
      height="700"
      :data="data.filter(d => !search || d.ad.toString().toLowerCase().includes(search.toLowerCase()))"
      show-summary
      :summary-method="getSummaries"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="image"
        label="产品"
        width="100"
      >
        <template slot-scope="scope">
          <a :href="scope.row.source_url" target="_blank" :title="scope.row.name"><img
            :src="scope.row.image"
            width="80px"
            height="80px"
          ></a>
        </template>
      </el-table-column>
      <el-table-column prop="product_id" label="产品ID" width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.website_id > 0"
            style="color: green;"
            @click="handleModifyFeed(scope.row)"
          >{{ scope.row.product_id }}</span>
          <span v-else @click="handleModifyFeed(scope.row)">{{ scope.row.product_id }}</span>
          <el-tooltip v-if="scope.row.operation !== ''" class="item" effect="dark" placement="right">
            <div slot="content">{{ scope.row.reason }}<br>{{ scope.row.operation_date }}</div>
            <el-tag type="danger">{{ scope.row.operation }}</el-tag>
          </el-tooltip>
          <i v-if="scope.row.product_id" style="display: block" class="el-icon-edit" @click="handleProcessProduct(scope.row)" />
          <span v-else>获取失败</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orders"
        sortable
        label="订单数"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.website_id > 0" style="color: green;" @click="handleShowOrders(scope.row)">{{ scope.row.orders }}/{{ scope.row.total_orders }}</span>
          <span v-else>{{ scope.row.orders }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        sortable
        label="价格"
        width="80"
      >
        <template slot-scope="scope">
          <span style="display: block">${{ scope.row.price.toFixed(2) }}</span>
          <i class="el-icon-refresh-right" @click="handleSyncProductInfo(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        sortable
        label="收入"
        width="120"
      >
        <template slot-scope="scope">
          C￥{{ scope.row.amount.toFixed(2) }}<br>
          H￥{{ scope.row.total_amount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="cost"
        sortable
        label="花费"
        width="110"
      >
        <template slot-scope="scope">
          <el-tag type="danger" size="mini" @click="handleShowHistory(scope.row)">￥{{ scope.row.cost }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="roi"
        label="历史"
        width="160"
      >
        <template slot-scope="scope">
          <span style="display: block">时 间: {{ scope.row.history.length*14 }}天</span>
          <span style="display: block">销/广: {{ scope.row.total_amount.toFixed(1) }}/{{ scope.row.total_cost.toFixed(1) }}</span>
          <span style="display: block">点/展: {{ scope.row.total_clicks }}/{{ scope.row.total_display }}</span>
          <span style="display: block">点击率: {{ scope.row.total_clicks ? (scope.row.total_clicks*100/scope.row.total_display).toFixed(2):0 }}%</span>
          <span style="display: block">CPC: {{ scope.row.total_clicks ? (scope.row.total_cost/scope.row.total_clicks).toFixed(2): 0 }}</span>
          <el-tag v-if="scope.row.suggestion.indexOf('删除') !== -1" type="danger">建议:{{ scope.row.suggestion }}</el-tag>
          <span v-else style="display: block">建 议: {{ scope.row.suggestion }}</span>

        </template>
      </el-table-column>
      <el-table-column
        prop="cpc"
        sortable
        label="CPC"
        width="80"
      >
        <template slot-scope="scope">
          <span @click="handleShowHistory(scope.row)">￥{{ scope.row.cpc }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="clicks"
        sortable
        label="点击量"
        width="90"
      >
        <template slot-scope="scope">
          <span @click="handleShowHistory(scope.row)">{{ scope.row.clicks }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="display"
        sortable
        label="展示"
        width="80"
      >
        <template slot-scope="scope">
          <span @click="handleShowHistory(scope.row)">{{ scope.row.display }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ad"
        label="广告系列"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.ad }}<br>
          {{ scope.row.adgroup }}
        </template>
      </el-table-column>
      <!--<el-table-column-->
      <!--prop="adgroup"-->
      <!--label="广告组"-->
      <!--width="200">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
      <!--prop="date_key"-->
      <!--label="日期范围"-->
      <!--width="200">-->
      <!--</el-table-column>-->
      <el-table-column
        width="120"
        prop="ads_id"
        label="账号信息"
      >
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            title="账号信息"
            width="600"
            trigger="click"
          >
            <div>
              <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <p>经理账号:{{ scope.row.manager }}</p>
                  <p>广告 ID:{{ scope.row.ads_id }}</p>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <p>mc服务器:{{ scope.row.api_url }}</p>
                </el-col>
              </el-row>
            </div>
            <span slot="reference">{{ scope.row.ads_id }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="landing"
        label="landing"
      >
        <template slot-scope="scope">
          <a :href="scope.row.landing" target="_blank">{{ scope.row.domain }}</a>
          <br>
          {{ scope.row.date_key }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDeleteSingleLanding(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      size="mini"
      style="float: left;margin-top: 5px;margin-left: 10px"
      type="danger"
      @click="handleDeleteLandings"
    >删除所有数据
    </el-button>
    <el-pagination
      v-if="data.length"
      background
      class="mt-pagination"
      :current-page="page"
      :page-sizes="[10,50,100,200,300,500]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />

    <el-dialog
      append-to-body
      title="过滤参数"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-form :inline="true" :model="filter" class="demo-form-inline" size="mini">
          <el-row>
            <el-form-item label="最小花费">
              <el-input v-model="filter.min_cost" placeholder="过滤的最小花费" />
            </el-form-item>
            <el-form-item label="最多花费">
              <el-input v-model="filter.max_cost" placeholder="过滤的最大花费" />
            </el-form-item>
            <el-form-item label="最小收入">
              <el-input v-model="filter.min_amount" placeholder="过滤的最小花费" />
            </el-form-item>
            <el-form-item label="最多收入">
              <el-input v-model="filter.max_amount" placeholder="过滤的最大花费" />
            </el-form-item>
            <el-form-item label="最小ROI">
              <el-input v-model="filter.min_roi" placeholder="min roi" />
            </el-form-item>
            <el-form-item label="最多ROI">
              <el-input v-model="filter.max_roi" placeholder="max roi" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="最小收入">
              <el-input v-model="filter.min_amount" placeholder="过滤的最小花费" />
            </el-form-item>
            <el-form-item label="最多收入">
              <el-input v-model="filter.max_amount" placeholder="过滤的最大花费" />
            </el-form-item>
            <el-form-item label="最少点击">
              <el-input v-model="filter.min_click" placeholder="最少点击" />
            </el-form-item>
            <el-form-item label="最多点击">
              <el-input v-model="filter.max_click" placeholder="最多点击" />
            </el-form-item>

            <el-form-item label="最少展示">
              <el-input v-model="filter.min_display" placeholder="最少点击" />
            </el-form-item>
            <el-form-item label="最多展示">
              <el-input v-model="filter.max_display" placeholder="最多点击" />
            </el-form-item>
            <el-form-item label="汇率">
              <el-input v-model="filter.rate" placeholder="综合汇率" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="最小CPC">
              <el-input v-model="filter.min_cpc" placeholder="最小CPC" />
            </el-form-item>
            <el-form-item label="最高CPC">
              <el-input v-model="filter.max_cpc" placeholder="最高CPC" />
            </el-form-item>

            <el-form-item label="排序">
              <el-select v-model="filter.order_by" placeholder="选择默认排序">
                <el-option label="广告费" value="cost" />
                <el-option label="点击量" value="clicks" />
                <el-option label="CPC" value="cpc" />
                <el-option label="展示" value="display" />
              </el-select>
            </el-form-item>
            <el-form-item label="升序">
              <el-switch v-model="filter.order_desc" />
            </el-form-item>
          </el-row>
          <!--<el-row>-->
          <!--<el-button size="mini" type="text" @click="handleSetFilter('normal')">不过滤</el-button>-->
          <!--<el-button size="mini" type="text" @click="handleSetFilter('loss')">严重亏损</el-button>-->
          <!--<el-button size="mini" type="text" @click="handleSetFilter('optimize')">需要优化</el-button>-->
          <!--<el-button size="mini" type="text" @click="handleSetFilter('profitable')">赚钱</el-button>-->
          <!--</el-row>-->
        </el-form>

      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGetReportData">确 定</el-button>
      </span>
    </el-dialog>
    <!--    <el-dialog-->
    <!--      append-to-body-->
    <!--      :title='fastmodifytitle'-->
    <!--      :visible.sync=productDialogVisible-->
    <!--      :close-on-click-modal="false">-->
    <!--      <el-form :model="feedmodify">-->
    <!--        <el-tag>{{fastmodify_detail}}</el-tag>-->
    <!--        <el-form-item label="操作原因" :label-width="200">-->
    <!--          <el-input v-model="feedmodify.reason" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="选择处理方式" :label-width="200">-->
    <!--          <el-select v-model="feedmodify.operation" placeholder="选择网站" clearable>-->
    <!--            <el-option label="所有" value=""></el-option>-->
    <!--            <el-option v-for="item in operations" :key="item.value" :label="item.label"-->
    <!--                       :value="item.value"></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="自定义标签" v-if="feedmodify.operation === 'customize'" :label-width="200">-->
    <!--          <el-input v-model="customize_operation" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="修改价格" v-if="feedmodify.operation === 'fast_modify_price'" :label-width="200">-->
    <!--          <el-input v-model="modify_price" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->

    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-switch style="margin-right: 20px" v-model="feedmodify.force" title="强制删除"></el-switch>-->
    <!--        <el-button @click="productDialogVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="handleFastModifyFeed">确 定</el-button>-->
    <!--       </span>-->
    <!--    </el-dialog>-->
    <el-dialog title="历史点击(每14天一条数据-当前日期的前14天)" :visible.sync="historyVisible" append-to-body>
      <el-table :data="history" show-summary>
        <el-table-column property="timestamp" label="日期" width="150" />
        <el-table-column property="amount" label="收入" width="100" />
        <el-table-column property="cost" label="花费" width="100" />
        <el-table-column property="clicks" label="点击" width="100" />
        <el-table-column property="display" label="展示" width="100" />
      </el-table>
    </el-dialog>
    <feedproductmodify
      :pst-visible="feedproductVisual"
      :website_id="website_id"
      :product_id="product_id"
      :domain="domain"
      @closePstDialog="feedproductVisual=false"
    />
    <orderdetail
      :order-static-visible="orderdetailVisual"
      :product_url="product_url"
      :website_id="website_id"
      @closeMyDialog="orderdetailVisual=false"
    />
    <feedfastmodify
      :domain="feedfastmodify_domain"
      :website_id="feedfastmodify_website_id"
      :product_id="feedfastmodify_product_id"
      :is-visual="feedFastModifyVisible"
      @closeMyDialog="feedFastModifyVisible=false"
    />
    <!--<pie-chart :PieChartVisible="piechatVisual" :chartData="chartData" @closeMyDialog="piechatVisual=false"></pie-chart>-->
  </el-dialog>
</template>

<script>
import feedproductmodify from '@/views/orders/element/feedproductmodify'
import { Get, DeleteByWebsite, Delete, SyncProductInfo } from '@/api/orders/googlereportlandingpage'
import orderdetail from '@/views/orders/element/orderdetail'
import qs from 'qs'
import { FastModifyFeedProduct } from '@/api/orders/merchantfeed'
import Feedfastmodify from './feedfastmodify'

export default {
  name: 'Googleadsreportlandingpage',
  components: { Feedfastmodify, feedproductmodify, orderdetail },
  props: ['isVisible', 'website_id', 'getdomain'],
  data() {
    return {
      feedFastModifyVisible: false,
      feedfastmodify_domain: '',
      feedfastmodify_website_id: '',
      feedfastmodify_product_id: '',
      historyVisible: false,
      history: [],
      filter_type: 'normal',
      customize_operation: 'normal',
      modify_price: '',
      operations: [
        {
          'label': '删除',
          'value': 'fast_delete'
        },
        {
          'label': '放到低CPC',
          'value': 'low_cpc'
        },
        {
          'label': '春天',
          'value': 'ads_spring'
        },
        {
          'label': '夏天',
          'value': 'ads_summer'
        },
        {
          'label': '秋天',
          'value': 'ads_autumn'
        },
        {
          'label': '冬天',
          'value': 'ads_winter'
        },
        {
          'label': '万圣节',
          'value': 'ads_holloween'
        },
        {
          'label': '暂停广告',
          'value': 'stop_ads'
        },
        {
          'label': '自定义标签',
          'value': 'customize'
        },
        {
          'label': '修改价格',
          'value': 'fast_modify_price'
        }
      ],
      feedmodify: {
        website_id: '',
        operation: '',
        reason: '低转化，不出单',
        product_id: '',
        force: false
      },
      fastmodifytitle: '',
      fastmodify_detail: '',
      productDialogVisible: false,
      kwInput: '',
      suggestion_operation: false,
      dialogVisible: false,
      innerDialogVisible: false,
      current_handle: 'auto',
      googleadsreportconfig_id: '',
      reportconfig_loading: false,
      reportconfigs: [],
      chartData: [],
      piechatVisual: false,
      product_url: '',
      orderdetailVisual: false,
      page: 1,
      pagesize: 100,
      total: 0,
      select_file: '',
      reportfiles: [],
      reportfiletotal: 0,
      search: '',
      multipleSelection: [],
      timerange: '',
      feedproductVisual: false,
      product_id: '',
      domain: '',
      loading: false,
      data: [],
      namelist: [],
      currentRow: '',
      filter: {
        'check': 'loss',
        'cache_key': '',
        'max_roi': 3,
        'min_roi': 0,
        'min_amount': 0,
        'max_amount': 0,
        'rate': 7,
        'timerange': '',
        'order_desc': false,
        'process': false,
        'order_by': 'cost',
        'min_cost': 14,
        'max_cost': 100000,
        'min_click': 50,
        'max_click': 0,
        'min_display': 0,
        'max_display': 0,
        'min_cpc': 0,
        'max_cpc': 0
      },
      fileList: [],
      base_api: '',
      shown: false,
      showall: false,
      showdelete: false,
      title: '过去14天落地页'
    }
  },
  watch: {
    getdomain(v) {
      this.title = v + 'original_name'
    },
    isVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.handleSetFilter('normal')
        this.handleGetReportData()
      }
    }
  },
  methods: {
    handleSyncProductInfo(row) {
      SyncProductInfo(row.id).then(response => {
        this.$notify({
          title: '成功',
          message: '已经发送同步任务',
          type: 'success',
          duration: 2000
        })
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '失败',
          message: err,
          type: 'error',
          duration: 2000
        })
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      if (this.current_handle === 'handleGetAutoReportData') {
        this.handleGetAutoReportData()
      } else {
        this.handleGetReportData()
      }
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      if (this.current_handle === 'handleGetAutoReportData') {
        this.handleGetAutoReportData()
      } else {
        this.handleGetReportData()
      }
    },
    handleSetFilter(action) {
      this.filter_type = action
      switch (action) {
        case 'normal':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'loss':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 14,
            'max_cost': 100000,
            'min_click': 50,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'highimpr':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 1000,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'highclick':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 2,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 20,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'optimize':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 5,
            'min_roi': 3,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'profitable':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 5,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.handleGetReportData()
          break
        case 'custome':
          this.filter = {
            'check': 'loss',
            'cache_key': '',
            'max_roi': 0,
            'min_roi': 0,
            'min_amount': 0,
            'max_amount': 0,
            'rate': 7,
            'timerange': '',
            'order_desc': false,
            'process': false,
            'order_by': 'cost',
            'min_cost': 0,
            'max_cost': 100000,
            'min_click': 0,
            'max_click': 0,
            'min_display': 0,
            'max_display': 0,
            'min_cpc': 0,
            'max_cpc': 0
          }
          this.innerDialogVisible = true
      }
    },
    handleDeleteLandings() {
      this.$confirm(`确认要删除网站所有landing信息吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteByWebsite(this.website_id).then(response => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          console.log(err)
          this.$notify({
            title: '失败',
            message: err,
            type: 'error',
            duration: 2000
          })
        })
      }).catch(() => {
      })
    },
    handleShowHistory(row) {
      this.history = row.history
      this.historyVisible = true
    },
    handleDeleteSingleLanding(row) {
      Delete(row.id).then(response => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '失败',
          message: err,
          type: 'error',
          duration: 2000
        })
      })
    },
    handleGetReportData() {
      this.current_handle = 'handleGetReportData'
      const _data = Object.assign({}, this.filter)
      _data.page = this.page
      if (!this.showall) {
        this.title = this.getdomain + '过去14天落地页'
        _data.website_id = this.website_id
      } else {
        this.title = '所有网站过去14天落地页'
      }
      _data.kw = this.kwInput
      _data.showdelete = this.showdelete
      _data.pagesize = this.pagesize
      _data.suggestion_operation = this.suggestion_operation
      console.log(this.pagesize)
      this.loading = true
      Get('', qs.stringify(_data))
        .then(response => {
          this.loading = false
          this.data = response.data.data
          this.total = response.data.total
          this.innerDialogVisible = false
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    handleProcessProduct(row) {
      this.feedfastmodify_domain = row.domain
      this.feedfastmodify_website_id = row.website_id
      this.feedfastmodify_product_id = row.product_id
      this.feedFastModifyVisible = true
      // this.fastmodifytitle = "快速处理" + row.domain + " feed产品:" + row.product_id
      // this.fastmodify_detail = "花费:" + row.total_cost.toFixed(1) + "展示:" + row.display + "点击:" + row.total_clicks + "销售:" + row.total_sales.toFixed(1)
      // this.currentRow = row
      // if (row.website_id) {
      //   this.feedmodify.website_id = parseInt(row.website_id)
      //   this.feedmodify.product_id = row.product_id
      //   this.modify_price = row.price
      //   this.feedmodify.reason = this.fastmodify_detail + ' 不出单'
      //   this.productDialogVisible = true
      // }
    },
    handleFastModifyFeed(row) {
      const _data = Object.assign({}, this.feedmodify)
      if (this.feedmodify.operation === 'customize') {
        _data.operation = this.customize_operation
      }
      if (this.feedmodify.operation === 'fast_modify_price') {
        _data.modify_price = this.modify_price
      }
      FastModifyFeedProduct(_data)
        .then(response => {
          this.$notify({
            title: '成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
          this.productDialogVisible = false
          if (this.currentRow) {
            this.currentRow.operation = _data.operation
            this.currentRow.reason = _data.reason
            if (this.feedmodify.operation === 'fast_modify_price') {
              this.currentRow.price = this.modify_price
            }
          }
          this.feedmodify.force = false
          // this.data.forEach(item => {
          //   if ((item.website_id === this.feedmodify.website_id) && (item.product_id === this.feedmodify.product_id)) {
          //     item.operation = this.feedmodify.operation
          //     item.reason = this.feedmodify.reason
          //   }
          // })
        }).catch(err => {
          this.$notify({
            title: '失败',
            message: err,
            type: 'success',
            duration: 2000
          })
          this.feedmodify.force = false
        })
    },
    handleModifyFeed(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
      if (row.website_id) {
        this.website_id = parseInt(row.website_id)
        this.product_id = row.product_id
        this.domain = row.domain
        this.feedproductVisual = true
      }
    },
    handleShowOrders(row) {
      if (row.website_id) {
        this.website_id = parseInt(row.website_id)
        this.product_url = row.landing
        this.orderdetailVisual = true
        console.log('shown')
      }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 2) {
          sums[index] = 'N/A'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 4 || index === 7 || index === 8) {
            sums[index] = (sums[index] / this.total).toFixed(2)
          }
          if (index === 5 || index === 6) {
            sums[index] = sums[index].toFixed(1)
            sums[index] += '元'
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    handleSelectionChange(val) {
      // this.multipleSelection = []
      // val.forEach(item => {
      //   if (item.product_id) {
      //     this.multipleSelection.push(item.product_id)
      //   }
      // })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    close() {
      this.$emit('closeWebDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
